<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>后端管理系统</title>
    <link rel="stylesheet" href="/layui-v2.10.0-rc.5/layui/css/layui.css" />
    <style>
      /* 侧边栏展开/收起动画 */
      .layui-side {
        transition: width 0.3s;
      }
      .layui-side-collapsed {
        width: 60px;
      }
    </style>
  </head>
  <body class="layui-layout-body">
    <div class="layui-layout">
      <!-- 头部区域 -->
      <!-- 侧边栏菜单 -->
      <div class="layui-side layui-side-menu">
        <div class="layui-side-scroll" id="sidebar-container">
          <ul
            class="layui-nav layui-nav-tree"
            lay-filter="test"
            style="height: -webkit-fill-available"
          >
            <li class="layui-nav-item layui-nav-itemed">
              <a class="" href="javascript:;">机构管理</a>
              <dl class="layui-nav-child">
                <dd><a onclick="router('/institution.html')">机构列表</a></dd>
              </dl>
            </li>
            <li class="layui-nav-item">
              <a href="javascript:;">员工管理</a>
              <dl class="layui-nav-child">
                <dd><a onclick="router('/employee.html')">员工列表</a></dd>
              </dl>
            </li>
          </ul>
        </div>
      </div>

      <!-- 内容主体 -->
      <div class="layui-body">
        <div class="layui-tab " laylayui-tab-card-filter="demo">
          <ul class="layui-tab-title">
            <li class="layui-this">首页</li>
          </ul>
          <div class="layui-tab-content" style="width: 90%;">
            <div class="layui-tab-item layui-show" id="mainContent" ></div>
          </div>
        </div>
      </div>

      <!-- 底部信息 -->
      <div class="layui-footer">
        © 2025 <a href="https://www.example.com">示例网站</a>
      </div>
    </div>

    <script src="/jquery/jquery-3.0.0.min.js"></script>
    <script src="/layui-v2.10.0-rc.5/layui/layui.js"></script>
    <script src="/js/base.js"></script>
    <script>
      layui.use(["element", "jquery"], function () {
        var element = layui.element;
        var $ = layui.jquery;
        $(".layui-layout-admin .layui-nav-item").on("click", function () {
          if ($(this).hasClass("layui-nav-itemed")) {
            $(".layui-side").addClass("layui-side-collapsed");
          } else {
            $(".layui-side").removeClass("layui-side-collapsed");
          }
        });

        load = $("#mainContent").load("institution.html");
      });

      function router(url) {
        $("#mainContent").load(url);
      }
    </script>
  </body>
</html>
